<template>
  <div class="patient-number-date">
    <div class="patient-number-date-inside">
      <div class="header">
        <div class="left item">
          <img
              alt="左侧"
              src="@/components/assets/images/design/1-12.webp"
          />
        </div>
        <div class="middle item">请点击下方卡片选择预约时段</div>
        <div class="right item">
          <img
              alt="右侧"
              src="@/components/assets/images/design/1-12.webp"
          />
        </div>
      </div>
      <el-row class="patient-number-area">
        <template v-if="timeRangeList.state">
          <template v-for="item in timeRangeList.result">
            <el-col :span="24">
              <div class="patient-number-item" @click="handleClick(item)">
                <div class="left">
                  {{ item.medbegtime }}-{{ item.medendtime }}
                </div>
                <div class="right">
                  序号{{ item.appoNo }}
                </div>
              </div>
            </el-col>
          </template>
        </template>
        <template v-else>
          <el-empty description="暂无数据"></el-empty>
        </template>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PatientNumberTimeRang',

  componentName: "PatientNumberTimeRang",

  components: {},

  data() {
    return {}
  },

  computed: {
    // 时间段区间
    timeRangeList() {
      return this.$store.getters['DRCbiz/getTimeRangeList']
    },
    stepInfo() {
      return this.$store.getters['DRCbiz/getStepsInfo']
    }
  },

  mounted() {
  },

  methods: {
    // 选中的时间段
    handleClick(row) {
      let stepInfo = (this.stepInfo);
      this.$store.dispatch('DRCbiz/setCurrTimeRangeInfo', row);
      this.$store.dispatch('DRCbiz/setStepsInfo', ++stepInfo);
    }
  },
}

</script>

<style scoped lang="scss">
@import "assets/style";
</style>